import axios from 'axios';
import {myRequest} from './request.js'
import { Alert,types } from './utils.js';
const eles = {
    btn: document.getElementById('fileUploadbtn'),
    upload: document.getElementById('file'),
}


const hasFile = () => eles.upload.files.length > 0

/*获取base64数据*/
// eles.upload.addEventListener('change', function(e){
//       let file = e.target.files[0]
//       let reader = new FileReader()
//       reader.readAsArrayBuffer(file)
//       reader.onload = function(e){
//         console.log(e.target.result)
//         let unit = new Uint8Array(e.target.result)
//         let bytes = unit.reduce((data, byte) => data+= String.fromCharCode(byte), '')
//         console.log(btoa(bytes) )
//     }
// })

/**
 * 表单文件上传 封装form-data数据
*/

/*表单文件上传 封装form-data数据 */
// eles.btn.addEventListener('click', function(e){
//     const file =  eles.upload.files[0]
//     if(!hasFile) return new Alert('文件为空，请检查', 3000, types.warning).show()

//     let formdata = new FormData();
//     formdata.append('file', file);
//     /*注意此处的请求头类型是可以省略不写的；如果写了就必须按照这种格式去做*/ 
//     axios.post('http://localhost:8080/file', formdata ,{
//         headers:{
//             'Content-Type': 'multipart/form-data'
//         }
//    }).then(res => {
//          console.log(res.data);
//          eles.upload.value = ''
//          new Alert('上传成功上传成功上传成功上传成功上传成功', 3000,types.success).show()
//     }).catch(err=> {
//         new Alert(err, 3000,types.error).show()
//     })
// })

/**
 * base64文件上传
*/

// eles.btn.addEventListener('click', function (event) {
//     if (!hasFile) return new Alert('文件为空，请检查', 3000, types.warning).show()
//     let file = eles.upload.files[0]
//     myRequest.base64Request(file).then(base64Data => {
//         axios.post('http://localhost:8080/base64', {
//             ext:file.name.split('.').pop(),
//             file: base64Data
//         }).then(res => {
//             new Alert(res.data.msg, 3000, types.success).show()
//             eles.upload.value = ''
//         }).catch(err=> {
//              new Alert(err, 3000, types.error).show()
//         })
//     }).catch(err => {  
//          new Alert(err, 3000, types.error).show()
//      })
// })


/**
 * 二进制文件直接上传
*/
eles.btn.addEventListener('click', function (event) {
    if (!hasFile) return new Alert('文件为空，请检查', 3000, types.warning).show()
    let file = eles.upload.files[0]
    myRequest.binaryRequest(file).then(res => {
        axios.post('http://localhost:8080/binary', res,{
          /*此处请求头的请求类型不写后端也不会报错；只是前端在控制台载荷中看到的是一堆报错无法解码的文件；建议对二进制上传文件加上*/ 
          headers: {
              'Content-Type': 'application/octet-stream',
              'x-ext': file.name.split('.').pop()
          }
        }).then(res => {
            new Alert(res.data.msg, 3000, types.success).show()
            eles.upload.value = ''
        }).catch(err=> {
             new Alert(err, 3000, types.error).show()
        })
   })
})




